<template>
	<view class="container">
		<!-- 自定义头部导航栏 -->
		<view class="title-box" :style="[{height:barHeight + 'px'}]">
			<!-- 返回键和搜索框 -->
			<view class="title-box1"
				:style="{ height: capsuleHeight + 'px',marginTop: capsuleTop + 'px', marginLeft: capsuleLeft + 'px'}">
				<image src="@/static/svg/error.svg" mode="" @click.stop="backPage" style="width: 41rpx;height: 51rpx;"></image>
				<view class="search-box" :style="{height: capsuleHeight + 'px',width:searchWidth +'rpx'}">
					<image src="@/static/svg/search.svg" style="width: 41rpx;height: 51rpx;margin-left: 15rpx;"></image>
					<input class="search-input"  placeholder="搜索城市" @focus="focueHandle" @blur="blurHandle"/>
				</view>
				<view v-show="showSearch" :style="{height: capsuleHeight + 'px',marginRight:rightObj + 'px',lineHeight:capsuleHeight + 'px'}" class="search-word">搜索</view>
			</view>
		</view>
		
		<!-- 当前位置 -->
		<view class="currentCity-box" :style="{top:barHeight +'px',paddingLeft:capsuleLeft + 'px'}">
			<view class="currentCity-box1">当前位置</view>
			<view class="currentCity-box2">武汉市</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barHeight:this.barHeight + 1,
				capsuleTop: this.capsuleTop, //胶囊距离顶部位置
				capsuleHeight: this.capsuleHeight, //胶囊本身高度
				capsuleLeft: this.capsuleLeft,//胶囊距离右边的宽度
				rightObj:this.capsuleWidth + 3,
				searchWidth:460,
				showSearch:false
			}
		},
		onShow() {
			console.log("app1", this.StatusBar);
			console.log(this.Custom);

		},
		methods: {
			/**
			 * 输入框聚焦时触发
			 */
			focueHandle(){
				this.searchWidth = 400
				this.showSearch = true
			},
			/**
			 * 输入框市区焦点时触发
			 */
			blurHandle(){
				this.searchWidth = 460
				this.showSearch = false
			},
			/**
			 * 返回上一页
			 */
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style scoped>
	@import url('./headSearch.css');
</style>